<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 -layer弹层实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/layer/layer.min.js"></script>
</head>
<script type="text/javascript">
function makeSure(){
  layer.msg('确认要删除！', {icon:5});
}
function saySorry(){
  layer.msg('不进行任何操作！', {icon:4});
}

$(function(){
	$('#test-btn-01').on('click', function(){
		layer.msg('世界人民震惊了！', {icon:2});
	});

	$('#test-btn-02').on('click', function(){
		layer.alert('这个世界充满了危险', {icon:2});
	});

	$('#test-btn-03').on('click', function(){
		layer.confirm('您确认要进行删除操作？',{icon:3, title:"操作确认"}, makeSure, saySorry);
	});
	
	//灯箱效果
	$("a.lightbox").on("click",function(){
		
		//网址分析处理，防止IE低版本浏览器缓存
		var url=$(this).attr("href");
		if(url === undefined){
			return false;
		}
		
		//分析是否为图片网址
		var photoRegex=/\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i;
		var isImage=photoRegex.test(url);

		if(url.indexOf("?")!==-1){
			url+='&';
		} else {
			url+='?';
		}
		var lightboxId=new Date().getTime();
		url+='random-id='+ lightboxId;

		//标题分析
		var title=$(this).attr("title");
		if(title===undefined){
			title=false;
		}

		//弹层的宽和高
		var width=$(this).attr("data-width");
		var height=$(this).attr("data-height");
		if(width!==undefined && height!==undefined){
			width+= 'px';
			height+= 'px';
		}

		if(isImage){
			//当为图片网址时，则新窗口中显示图片
			layer.open({
				type: 1,
				title: title,
				shadeClose:true,
				id:'lightbox-id-'+lightboxId,
				area: [width, height],
				content: "<img src='"+url+"'>"		  
			});
		} else {
			//通过ajax调用页面内容，使用layer将页面html内容显示出来
			$.get(url, function(ajaxContent){
				layer.open({
					type: 1,
					title: title,
					id:'lightbox-id-'+lightboxId,
					area: [width, height],
					content: ajaxContent		  
				});	
			});
		}

		return false;
	});
});
</script>
<body>
<div class="container mt20">
<input type="submit" name="submit-btn11" value="提示信息" class="btn btn-info mr20" id="test-btn-01"><br><br>
<input type="submit" name="submit-btn12" value="警告信息" class="btn btn-success mr20" id="test-btn-02"><br><br>
<input type="submit" name="submit-btn13" value="确认信息" class="btn btn-danger mr20" id="test-btn-03"><br><br>
<a href="https://paymaya.com/assets/img/paymaya-horizontallogo.png" class="lightbox" data-width="228" data-height="90">图片的灯箱效果1</a> <a href="https://paymaya.com/assets/img/paymaya-horizontallogo.png" class="lightbox link-danger" data-width="228" data-height="90" title="神奇的标题">图片的灯箱效果2</a><br><br>
<a href="ajax-content.html" class="lightbox">AJAX调用的灯箱效果1</a> <a href="ajax-content.html" class="lightbox link-success" title="神奇的标题">AJAX调用的灯箱效果2</a>
</div>
</body>
</html>